
<template>
  <view class="box">
    <network @retry="retry"></network>
    <view class="function wap">
      <view
        class="function1"
        :class="{ function2: tab_a == i }"
        v-for="(l, i) in tab"
        :key="i"
        @tap="checkTab(i)"
      >
        {{ l }}
      </view>
    </view>
    <block v-if="Array.isArray(orderList) && orderList.length > 0">
      <view class="order wap" v-for="item in orderList" :key="item.ID">
        <view
          class="item"
          @click="nav_to(`/pages/users/shop_gift_info?id=${item.ID}`)"
        >
          <view class="hd row">
            <view class="col_2 shop_logo">
              <image :src="item.shopImg" mode="" />
            </view>
            <view class="col_18 shop_tit">{{ item.shopName || "" }}</view>
			
            <view class="col_4 staus">{{ getStatus(item.Status) }}</view>
            <view class="col_14 border_no">订单编号:{{ item.OrderNo }}</view>
            <view class="col_10 time">{{ newtime(item.OrderTime) }}</view>
          </view>
          <view class="bd row" v-for="goods in item.Item" :key="goods.ID">
            <view class="col_8">
              <view class="cover">
                <image :src="goods.ProductImg" mode="" />
              </view>
            </view>
            <view class="col_16">
              <view class="name f1 d1">
                {{ goods.ProductName }}
              </view>
              <view class="sku">
                {{ goods.Style || "" }}
              </view>
              <view class="price">
                <view class="f2">￥{{ goods.Price }}</view>
                <view class="f2">×{{ goods.Qty }}</view>
              </view>
            </view>
          </view>

          <view class="ft row">
            <view
              class="btn"
              v-if="item.Status == 0"
              @click.stop="cancelOrder(item.ID)"
            >
              取消订单
            </view>
            <view
              class="btn them_color"
              @click.stop="playOrder(item)"
              v-if="item.Status == 0"
            >
              继续付款
            </view>
          </view>
        </view>
      </view>
    </block>
    <o-empty v-else bg="#f3f4f6" text="暂无未收到礼物" imgSize="200" />

  
  </view>
</template>

<script>


export default {
  data() {
    return {
      tab: ["全部", "待接收", "待收货", "已拒绝"],
      tab_a: 0,
      page: 1,
      contentHeight: 0,
      orderList: [],
      Status: 99,
      isAll: false,
      pageSize: 10,
      Commission: 0,
      playOrderObj: {},
    };
  },
  onLoad() {
    this.init();
  },
  onReachBottom() {
    console.log("触底了...");
    if (!this.isAll) {
      this.page++;
      this.getOrderList();
    }
  },
  methods: {
    async getShop(id) {
      try {
        let shop = await this.$api.post("/Products/ShopDetail", {
          ShopID: id,
        });
        return shop.data || {};
      } catch (error) {
        return {};
      }
    },
    async init() {
      this.orderList = [];
      this.page = 1;
      this.isAll = false;

      this.getOrderList();
    },
    // 积分支付
    playOrder(item) {
      this.playOrderObj = item;
      this.$refs.cpay.open();
    },
    
    async wxPay() {
      this.$pv.closeLoad();
      let data = {
        total_fee: this.playOrderObj.Price - this.playOrderObj.Score,
        EventType: "商城礼物",
        EventID: this.playOrderObj.ID,
        body: this.playOrderObj.Item[0].ProductName,
      };
      console.log(this.playOrderObj.Item[0].ProductName);
      this.$pv.load("正在处理");
      let res = await this.$api.post("/Payment/PayV2", data);
      this.$pv.closeLoad();
      let orderInfo = JSON.parse(res.data);
      console.log(res, "------------look");
      let _this = this;
      uni.getProvider({
        service: "payment",
        success: function (res) {
          console.log(res.provider);
          if (~res.provider.indexOf("wxpay")) {
            uni.requestPayment({
              provider: "wxpay", //固定值为"wxpay"
              orderInfo: orderInfo,

              success: function (res) {
                this.nav_to(`/pages/goods/order_details?id=${_this.playOrderObj.ID}`)
              },
              fail: function (err) {
                _this.$pv.msg("支付失败");
              },
            });
          }
        },
      });
    },
    

    openSlectPay() {
      this.$refs.pay.open("open");
    },
    closeSlectPay() {
      this.$refs.pay.close();
    },

    //获取订单列表
    async getOrderList() {
      let res = await this.$api.post("/Order/MyOrders", {
        PageIndex: this.page,
        PageSize: this.pageSize,
        Status: this.Status,
      });
      let newList = [];
      if (Array.isArray(res.data)) {
        newList = JSON.parse(JSON.stringify(res.data));
        console.log("----------1");
      }
      if (Array.isArray(newList) && newList.length < this.pageSize) {
        this.isAll = true;
      } else {
        this.isAll = false;
      }
      this.orderList = this.orderList.concat(newList);
      console.log(newList, "----------2");
    },
    checkTab(i) {
      this.tab_a = i;
      if (i == 0) {
        this.Status = 99;
      } else if (i == 1) {
        this.Status = 0;
      } else if (i == 2) {
        this.Status = 1;
      } else if (i == 3) {
        this.Status = -1;
      }
      this.isAll = false;
      this.page = 1;
      this.orderList = [];
      this.getOrderList();
    },
    cancelOrder(OrderID) {
      let _this = this;
      uni.showModal({
        title: "",
        content: "你确认要取消订单吗",
        success: async function (res) {
          if (res.confirm) {
            try {
              await _this.$api.post("Order/Cancel", { ID: OrderID });
              _this.$pv.msg("取消成功");
              _this.isAll = false;
              _this.page = 1;
              _this.orderList = [];
              _this.getOrderList();
            } catch (e) {
              //TODO handle the exception
              _this.$pv.msg("取消失败");
            }
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 获取元素高度
    getHeight() {
      let that = this;
      uni.getSystemInfo({
        success: function (res) {
          // res - 各种参数
          that.contentHeight = res.windowHeight;
        },
      });
    },

    // 改变时间格式
    newtime(time) {
      if (time) {
        time = time.replace(/T/, " ");
        return (time = time.split(".")[0]);
      }
    },
    // 跳转商品订详情
    goto_payment_details(i) {
      uni.navigateTo({
        url:
          "/pages/goods/order_particulars?OrderNo=" + this.orderlist[i].OrderNo,
      });
    },
  },

  computed: {
    getStatus(l) {
      console.log("------------l", l);
      return (l) => {
        let str = "";
        if (l == 0) {
          str = "待付款";
        } else if (l == 1) {
          str = "待发货";
        } else if (l == -1) {
          str = "已取消";
        }
        return str;
      };
    },
  },
};
</script>


<style lang="scss">
.box {
  padding-top: 100rpx;
  .xj-scroll {
    background: #f3f4f6 !important;
    padding: 0 32rpx;
  }
  .function {
    position: fixed;
    top: 0;
    // #ifdef H5
    top: 44px;
    // #endif
    left: 0;
    width: 750rpx;
    display: flex;
    justify-content: space-between;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    padding-left: 24rpx;
    padding-right: 24rpx;
    z-index: 50;
    background: #000000;
    .function1 {
      width: 23%;
      font-size: 26rpx;
      line-height: 40rpx;
      text-align: center;
      background: #9a9a9a;
      padding: 10rpx 0;
      border-radius: 15rpx;
      &.function2 {
        font-size: 30rpx;
        color: #fff;
      }
    }
  }

  .more {
    display: flex;
    justify-content: center;
    padding: 20rpx;
    text {
      color: #ff0000;
      font-size: 26rpx;
      line-height: 26rpx;
    }
  }

  .order {
    background: #fff;
    border-radius: 15rpx;
    .order1 {
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 20rpx;
      position: relative;
      .img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100%;
        background: #000;
        font-size: 50rpx;
        line-height: 100rpx;
        text-align: center;
        color: #fff;
      }

      .introduce {
        width: 400rpx;
        display: flex;
        flex-direction: column;

        .name {
          font-size: 22rpx;
          line-height: 22rpx;
          color:#ff0000;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .time {
          margin-top: 16rpx;
          font-size: 22rpx;
          line-height: 22rpx;
          color: #ff0000;
        }
      }

      .money {
        font-size: 30rpx;
        line-height: 30rpx;
        color: #ff0000;

        text {
          margin-left: 2rpx;
          font-size: 20rpx;
          line-height: 20rpx;
          color: #606266;
        }
      }
    }
    .determine {
      padding: 0 20rpx 20rpx;
      display: flex;
      justify-content: flex-end;
      .determine1 {
        width: 150rpx;
        height: 40rpx;
        background: #000;
        border-radius: 40rpx;
        color: #ffffff;
        font-size: 20rpx;
        line-height: 40rpx;
        text-align: center;
      }
      .determine2 {
        width: 150rpx;
        height: 40rpx;
        background: #000;
        border-radius: 40rpx;
        color: #ffffff;
        font-size: 20rpx;
        line-height: 40rpx;
        text-align: center;
      }
    }
  }
}
.order {
  .item {
    margin-top: 20rpx;
    // padding-bottom: 20;
    .hd {
      padding-top: 10rpx;
      .col_2,
      .col_4,
      .col_14,
      .col_10,
      .col_18 {
        height: 50rpx;
        line-height: 50rpx;
      }
      .time {
        font-size: 24rpx;
        color: #666;
        text-align: right;
      }
      .border_no {
        font-size: 28rpx;
        color: #333;
      }
      .shop_tit {
        font-size: 32rpx;
        font-weight: bold;
      }
      .staus {
        font-size: 28rpx;
        text-align: right;
      }
      .shop_logo {
        image {
          height: 50rpx;
          width: 50rpx;
          // background: #f00;
          border-radius: 25rpx;
        }
      }
    }
    .bd {
      margin-top: 20rpx;
      .cover {
        height: 180rpx;
        width: 180rpx;
        border-radius: 10rpx;
      }
      .price {
        margin-top: 20rpx;
        justify-content: space-between;
        display: flex;
      }
    }
    .ft {
      padding-top: 20rpx;
      padding-bottom: 30rpx;
      display: flex;
      justify-content: flex-end;
      .btn {
        margin-left: 20rpx;
        width: 180rpx;
        line-height: 50rpx;
        width: 180rpx;
        text-align: center;
        border-radius: 100rpx;
        border: 1px solid #333;
        font-size: 28rpx;
      }
      .them_color {
        color: #18b566;
        border-color: #18b566;
      }
    }
  }
}
.cover {
  height: 190rpx;
  width: 190rpx;
  image {
    height: 100%;
    width: 100%;
    border-radius: 10rpx;
  }
}

.sku {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #999;
}

.ply_select {
  background: #fff;
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-bottom: 20rpx;
  .hd {
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    text-align: center;
    color: #000;
    position: relative;
    border-bottom: 2px solid #f5f6f7;
    .popup_close {
      position: absolute;
      top: 20rpx;
      right: 0;
      height: 45rpx;
      width: 45rpx;
      background: #999;
      border-radius: 50%;
      text-align: center;
      line-height: 45rpx;
    }
  }
  .bd {
    min-height: 400rpx;
  }
  .btn {
    margin-top: 20rpx;
    height: 90rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    background: #0f0;
    color: #fff;
    border-radius: 90rpx;
  }
}
</style>
